import React from 'react'
import classnames from 'classnames'
import {NavLink} from 'react-router-dom'
import './battleItem.less'

const BattleItem = props => {
  const {roomNo, createTime, totalSettleVo, gameNo, gameType, _appendInfo = {ruleName: ''}} = props.data
  const showQrcode = props.showQrcode;
  const roomNumbers = roomNo.split('')
  const toLink = `/RoundReply/${gameNo}/${gameType}`
  return <div  className="battle-item">
    <div className="battle-content-top pure-g">
      <div className="pure-u-15-24 middle-img">
        <span className="roomNo-text">
          房间号： {roomNo}
        </span>
      </div>
      <div className="pure-u-9-24 text-right">
        <span className="mrr-2 battle-time">{util.timeUtil.getDateTime(createTime)}</span>
      </div>
    </div>
    <div className="battle-content-middle pure-g">
      {
        totalSettleVo.map((settle, index) => {
          const pointCn = classnames({'record-fail': settle.point >= 0, 'record-win': settle.point < 0, 'mrr-3': true})
          return <div className="pure-u-1-3 box" key={index} onClick={showQrcode.bind(this, settle)}>
            <div className="point-show text-ellipsis">
              <span className="mlr-3">{util.maxLength(settle.nickName, 4)}</span>
              <span className={pointCn}>{settle.point > 0 ? '+' + settle.point: settle.point}</span>
            </div>
          </div>
        })
      }
    </div>
    <div className="battle-content-bottom">
      <NavLink to={toLink}>
        <span className="mlr-2">{_appendInfo.ruleName}</span>
        <span className="mrr-2 see-detail">点击查看详情</span>
      </NavLink>
    </div>
  </div>
}
export default BattleItem